<template>
    <view class="container">
        <view class="avatar">
            <image src="/static/images/avatar.png"></image>
        </view>

        <view class="form">
            <u--form labelPosition="left" :model="business" :rules="rules" ref="web">
                <u-form-item label="手机" prop="mobile" borderBottom>
                    <u--input v-model="business.mobile" border="none" placeholder="请输入手机号"></u--input>
                </u-form-item>

                <u-form-item label="密码" prop="password" borderBottom>
                    <u--input type="password" v-model="business.password" border="none" placeholder="请输入密码"></u--input>
                </u-form-item>

                <view style="margin-top: 25px;">
                    <u-button type="warning" @click="submit">注册登录</u-button>
                </view>
            </u--form>
        </view>

        <!-- 提醒组件 -->
        <u-toast ref="notice" />
    </view>
</template>
<script>
export default {
    onReady() {
        //为了兼容小程序设置验证规则
        this.$refs.web.setRules(this.rules)
    },
    data() {
        return {
            business: {
                mobile: '13826508994',
                password: '123'
            },
            rules: {
                mobile: [
                    {
                        required: true,
                        message: '请输入手机号码',
                        trigger: ['change', 'blur']
                    },
                    {
                        //自定义验证函数 使用uView自带效验规则
                        validator: (rule, value, callback) => uni.$u.test.mobile(value),
                        message: '手机号码格式有误',
                        trigger: ['change', 'blur']
                    },
                ],
                password: {
                    required: true,
                    message: '请输入手机号码',
                    trigger: ['change', 'blur']
                }
            }
        }
    },
    methods: {
        submit() {
            //只有当满足效验规则的时候才发起请求
            this.$refs.web.validate().then(async res => {
                var result = await uni.$u.http.post('/business/web', this.business)

                if (result.code == 0) {
                    this.$refs.notice.show({
                        type: 'error',
                        message: result.msg
                    })

                    return false
                } else {
                    this.$refs.notice.show({
                        type: 'success',
                        message: result.msg,
                        complete() {
                            //本地存储
                            uni.setStorageSync('business', result.data)

                            //返回上一个界面
                            uni.$u.route({
                                type: 'back',
                                delta: 1
                            })
                        }
                    })
                }

            }).catch(error => {
                this.$refs.notice.show({
                    type: 'error',
                    message: '表单效验失败'
                })
            })
        },
    },
}
</script>

<style>
page {
    background-color: #f8fafe;
}

.container .avatar {
    text-align: center;
    background-color: #fff;
}

.avatar image {
    width: 120px;
    height: 120px;
    margin: 50px 0;
    border-radius: 50%;
}

.form {
    margin: 0 50rpx;
    box-sizing: border-box;
}

.btn {
    margin-top: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.u-icon {
    margin-left: 10px;
}
</style>